<template>
  <div class="page">
    <div class="page-header">
      <h1>安全评价报告管理</h1>
      <p>查看、检索和管理安全评价报告</p>
      <div class="header-stats">
        <div class="stat-item">
          <span class="stat-number">{{ totalReports }}</span>
          <span class="stat-label">总报告数</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">{{ filteredReports.length }}</span>
          <span class="stat-label">当前显示</span>
        </div>
      </div>
    </div>
    
    <!-- 检索控制区域 -->
    <div class="report-controls">
      <div class="search-section">
        <div class="search-bar">
          <div class="search-input-group">
            <label>检索类型：</label>
            <select v-model="filterType" class="filter-select">
              <option value="">全部报告</option>
              <option value="report_id">报告编号</option>
              <option value="mine_name">矿山名称</option>
            </select>
          </div>
          
          <div class="search-input-group" v-if="filterType">
            <label>关键词：</label>
            <input 
              type="text" 
              v-model="keyword" 
              :placeholder="filterType === 'report_id' ? '请输入报告编号...' : '请输入矿山名称...'"
              @keyup.enter="searchReports"
              class="search-input"
            >
          </div>
          
          <div class="search-actions">
            <button class="btn btn-primary" @click="searchReports" :disabled="isLoading">
              <i class="fas fa-search" v-if="!isLoading"></i>
              <i class="fas fa-spinner fa-spin" v-if="isLoading"></i>
              检索
            </button>
            <button class="btn btn-secondary" @click="clearSearch" v-if="keyword || filterType">
              <i class="fas fa-times"></i>
              清除
            </button>
            <button class="btn btn-info" @click="refreshReports">
              <i class="fas fa-sync-alt"></i>
              刷新
            </button>
            <button class="btn btn-success" @click="showReportIdModal = true">
              <i class="fas fa-file-export"></i>
              导出报告
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 报告列表表格 -->
    <div class="reports-container">
      <div v-if="isLoading" class="loading-state">
        <i class="fas fa-spinner fa-spin"></i>
        <p>正在加载报告列表...</p>
      </div>
      
      <div v-else-if="filteredReports.length === 0" class="empty-state">
        <i class="fas fa-file-alt"></i>
        <p>{{ keyword ? '未找到匹配的报告' : '暂无安全评价报告' }}</p>
      </div>
      
      <div v-else class="report-table-container">
        <table class="report-table">
          <thead>
            <tr>
              <th>报告编号</th>
              <th>矿山名称</th>
              <th>评价日期</th>
              <th>评价人</th>
              <th>安全等级</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="report in filteredReports" :key="report.evaluation_id" class="report-row">
              <td class="report-id">{{ report.ReportID }}</td>
              <td class="mine-name">{{ report.MineName }}</td>
              <td class="evaluation-date">{{ report.EvaluationDate }}</td>
              <td class="evaluator">{{ report.Evaluator }}</td>
              <td class="risk-level">
                <span class="level-badge" :class="getRiskLevelClass(report.RiskLevel)">
                  {{ report.RiskLevel }}
                </span>
              </td>
              <td class="actions">
                <button 
                  class="btn btn-sm btn-info" 
                  @click="previewReport(report)"
                  :disabled="isPreviewingReport"
                  title="预览报告"
                >
                  <i class="fas fa-eye"></i>
                  预览
                </button>
                <button 
                  class="btn btn-sm btn-success" 
                  @click="exportReport(report)"
                  :disabled="isExportingReport === report.evaluation_id"
                  title="导出"
                >
                  <i class="fas fa-file-pdf" v-if="isExportingReport !== report.evaluation_id"></i>
                  <i class="fas fa-spinner fa-spin" v-if="isExportingReport === report.evaluation_id"></i>
                  导出
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        
        <!-- 分页控件 -->
        <div class="pagination" v-if="pagination.total_pages > 1">
          <button 
            class="btn btn-sm btn-secondary" 
            @click="goToPage(pagination.current_page - 1)"
            :disabled="!pagination.has_previous || isLoading"
          >
            <i class="fas fa-chevron-left"></i>
            上一页
          </button>
          
          <span class="page-info">
            第 {{ pagination.current_page }} / {{ pagination.total_pages }} 页 
            (共 {{ pagination.total_count }} 条记录)
          </span>
          
          <button 
            class="btn btn-sm btn-secondary" 
            @click="goToPage(pagination.current_page + 1)"
            :disabled="!pagination.has_next || isLoading"
          >
            下一页
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 报告ID输入弹窗 -->
    <div v-if="showReportIdModal" class="modal-overlay" @click="closeReportIdModal">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <h3><i class="fas fa-file-export"></i> 导出报告</h3>
          <button class="close-btn" @click="closeReportIdModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <div class="form-group">
            <label for="reportId">请输入报告ID：</label>
            <input 
              type="text" 
              id="reportId"
              v-model="inputReportId" 
              placeholder="请输入评价记录ID..."
              class="form-input"
              @keyup.enter="exportReportById"
            >
            <small class="form-help">请输入要导出报告的评价记录ID</small>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closeReportIdModal">
            <i class="fas fa-times"></i>
            取消
          </button>
          <button 
            class="btn btn-primary" 
            @click="exportReportById"
            :disabled="!inputReportId || isExportingById"
          >
            <i class="fas fa-file-pdf" v-if="!isExportingById"></i>
            <i class="fas fa-spinner fa-spin" v-if="isExportingById"></i>
            导出
          </button>
        </div>
      </div>
    </div>

    <!-- 报告预览弹窗 -->
    <div v-if="showPreviewModal" class="preview-modal-overlay" @click="closePreviewModal">
      <div class="preview-modal" @click.stop>
        <div class="modal-header">
          <h3><i class="fas fa-eye"></i> 报告预览</h3>
          <button class="close-btn" @click="closePreviewModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <div v-if="previewReportData" class="preview-content">
            <!-- 基本信息预览 -->
            <div class="preview-section">
              <h4>基本信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">报告编号：</span>
                  <span class="value">{{ previewReportData.ReportID }}</span>
                </div>
                <div class="info-item">
                  <span class="label">矿山名称：</span>
                  <span class="value">{{ previewReportData.MineName }}</span>
                </div>
                <div class="info-item">
                  <span class="label">评价日期：</span>
                  <span class="value">{{ previewReportData.EvaluationDate }}</span>
                </div>
                <div class="info-item">
                  <span class="label">评价人：</span>
                  <span class="value">{{ previewReportData.Evaluator }}</span>
                </div>
                <div class="info-item">
                  <span class="label">安全等级：</span>
                  <span class="value">
                    <span class="level-badge" :class="getRiskLevelClass(previewReportData.RiskLevel)">
                      {{ previewReportData.RiskLevel }}
                    </span>
                  </span>
                </div>
                <div class="info-item">
                  <span class="label">综合得分：</span>
                  <span class="value">{{ previewReportData.comprehensive_score }}</span>
                </div>
              </div>
            </div>
            
            <!-- 完整报告内容 -->
            <div v-if="fullReportData" class="full-report-preview">
              <div class="preview-section">
                <h4>完整报告内容</h4>
                <div class="report-summary">
                  <p><strong>报告已生成：</strong>{{ fullReportData['报告基本信息']['报告编号'] }}</p>
                  <p><strong>安全等级：</strong>{{ fullReportData['安全等级判定']['总体安全等级'] }}</p>
                  <p><strong>低分指标数量：</strong>{{ fullReportData['安全等级判定']['低分指标数量'] }}</p>
                  <p><strong>整改建议数量：</strong>{{ fullReportData['整改建议'] ? fullReportData['整改建议'].length : 0 }}</p>
                </div>
              </div>
            </div>
          </div>
          
          <div v-if="isLoadingPreview" class="loading-preview">
            <i class="fas fa-spinner fa-spin"></i>
            <p>正在加载完整报告...</p>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closePreviewModal">
            <i class="fas fa-times"></i>
            关闭
          </button>
          <!-- <button 
            class="btn btn-primary" 
            @click="loadFullReport"
            :disabled="isLoadingPreview"
            v-if="!fullReportData"
          >
            <i class="fas fa-file-alt" v-if="!isLoadingPreview"></i>
            <i class="fas fa-spinner fa-spin" v-if="isLoadingPreview"></i>
            查看完整报告
          </button> -->
          <!-- <button 
            class="btn btn-success" 
            @click="exportCurrentReport"
            :disabled="isExportingCurrentReport"
            v-if="fullReportData"
          >
            <i class="fas fa-file-pdf" v-if="!isExportingCurrentReport"></i>
            <i class="fas fa-spinner fa-spin" v-if="isExportingCurrentReport"></i>
            导出
          </button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { api } from '../api/index'
import { ReportService } from '../utils/reportService'

// 状态管理
const isLoading = ref(false)
const isPreviewingReport = ref(false)
const isLoadingPreview = ref(false)
const isExportingReport = ref(null)
const isExportingCurrentReport = ref(false)
const showPreviewModal = ref(false)

// 报告ID输入弹窗状态
const showReportIdModal = ref(false)
const inputReportId = ref('')
const isExportingById = ref(false)

// 检索参数
const filterType = ref('')
const keyword = ref('')
const currentPage = ref(1)

// 数据状态
const filteredReports = ref<any[]>([])
const pagination = ref({
  current_page: 1,
  total_pages: 1,
  total_count: 0,
  page_size: 10,
  has_next: false,
  has_previous: false
})

// 预览相关数据
const previewReportData = ref<any>(null)
const fullReportData = ref<any>(null)

// 计算属性
const totalReports = computed(() => pagination.value.total_count)

// 加载报告列表
const loadReports = async (page = 1) => {
  try {
    isLoading.value = true
    
    const params: any = {
      page: page,
      page_size: 10
    }
    
    // 添加检索参数
    if (filterType.value && keyword.value) {
      params.filter_type = filterType.value
      params.keyword = keyword.value
    }
    
    console.log('加载报告列表参数:', params)
    
    const response = await api.evaluation.getReportsList(params)
    
    if (response.success) {
      filteredReports.value = response.data.reports
      pagination.value = response.data.pagination
      
      console.log('成功加载报告列表:', response.data)
    } else {
      console.error('加载报告列表失败:', response.error)
      alert('加载报告列表失败：' + (response.error || '未知错误'))
    }
  } catch (error) {
    console.error('加载报告列表异常:', error)
    alert('加载报告列表失败，请重试')
  } finally {
    isLoading.value = false
  }
}

// 检索报告
const searchReports = async () => {
  currentPage.value = 1
  await loadReports(1)
}

// 清除检索
const clearSearch = async () => {
  filterType.value = ''
  keyword.value = ''
  currentPage.value = 1
  await loadReports(1)
}

// 刷新报告
const refreshReports = async () => {
  await loadReports(currentPage.value)
}

// 分页跳转
const goToPage = async (page: number) => {
  if (page >= 1 && page <= pagination.value.total_pages) {
    currentPage.value = page
    await loadReports(page)
  }
}

// 预览报告
const previewReport = async (report: any) => {
  try {
    isPreviewingReport.value = true
    previewReportData.value = report
    fullReportData.value = null
    showPreviewModal.value = true
    
    console.log('预览报告:', report)
  } catch (error: any) {
    console.error('预览报告失败:', error)
    alert('预览报告失败，请重试')
  } finally {
    isPreviewingReport.value = false
  }
}

// 加载完整报告数据
const loadFullReport = async () => {
  if (!previewReportData.value) return
  
  try {
    isLoadingPreview.value = true
    
    const response = await api.evaluation.generateSafetyReport(previewReportData.value.evaluation_id)
    
    if (response.success) {
      fullReportData.value = response.data
      console.log('成功加载完整报告:', response.data)
    } else {
      alert('加载完整报告失败：' + (response.error || '未知错误'))
    }
  } catch (error: any) {
    console.error('加载完整报告失败:', error)
    alert('加载完整报告失败，请重试')
  } finally {
    isLoadingPreview.value = false
  }
}

// 关闭预览弹窗
const closePreviewModal = () => {
  showPreviewModal.value = false
  previewReportData.value = null
  fullReportData.value = null
}

// 导出报告（从列表）
const exportReport = async (report: any) => {
  try {
    isExportingReport.value = report.evaluation_id
    
    // 使用统一的报告服务导出PDF
    await ReportService.exportReport(report.evaluation_id, {
      filename: `${report.ReportID}_安全评价报告.pdf`,
      format: 'pdf'
    })
    
    alert('PDF报告导出成功！')
  } catch (error: any) {
    console.error('导出报告失败:', error)
    alert('导出报告失败：' + (error.message || '请重试'))
  } finally {
    isExportingReport.value = null
  }
}

// 导出当前预览的报告
const exportCurrentReport = async () => {
  if (!fullReportData.value || !previewReportData.value) return
  
  try {
    isExportingCurrentReport.value = true
    
    // 使用统一的报告服务导出PDF
    await ReportService.exportToPDF(fullReportData.value, {
      filename: `${previewReportData.value.ReportID}_安全评价报告.pdf`
    })
    
    alert('PDF报告导出成功！')
  } catch (error: any) {
    console.error('导出当前报告失败:', error)
    alert('导出当前报告失败：' + (error.message || '请重试'))
  } finally {
    isExportingCurrentReport.value = false
  }
}


// 关闭报告ID输入弹窗
const closeReportIdModal = () => {
  showReportIdModal.value = false
  inputReportId.value = ''
}

// 根据ID导出报告
const exportReportById = async () => {
  if (!inputReportId.value) {
    alert('请输入报告ID')
    return
  }
  
  const evaluationId = parseInt(inputReportId.value)
  if (isNaN(evaluationId)) {
    alert('请输入有效的数字ID')
    return
  }
  
  try {
    isExportingById.value = true
    
    // 使用统一的报告服务导出PDF
    await ReportService.exportReport(evaluationId, {
      filename: `REP${evaluationId}_安全评价报告.pdf`,
      format: 'pdf'
    })
    
    alert('PDF报告导出成功！')
    closeReportIdModal()
  } catch (error: any) {
    console.error('导出报告失败:', error)
    alert('导出报告失败：' + (error.message || '请重试'))
  } finally {
    isExportingById.value = false
  }
}

// 获取安全等级样式类（与Evaluation.vue保持一致）
const getRiskLevelClass = (level: string) => {
  if (level?.includes('A级') || level?.includes('优秀')) return 'level-a'
  if (level?.includes('B级') || level?.includes('良好')) return 'level-b'
  if (level?.includes('C级') || level?.includes('一般')) return 'level-c'
  if (level?.includes('D级') || level?.includes('较差')) return 'level-d'
  return 'level-default'
}

// 组件挂载时加载数据
onMounted(() => {
  loadReports()
})
</script>

<style scoped>
/* 页面头部样式 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  border-radius: 16px;
  margin-bottom: 30px;
  text-align: center;
}

.page-header h1 {
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: 600;
}

.page-header p {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 20px;
}

.header-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

/* 检索控制区域 */
.report-controls {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.search-section {
  max-width: 100%;
}

.search-bar {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.search-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
}

.search-input-group label {
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.filter-select,
.search-input {
  padding: 12px 15px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

.filter-select:focus,
.search-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.search-actions {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* 报告容器 */
.reports-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 加载和空状态 */
.loading-state,
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
}

.loading-state i,
.empty-state i {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}

.loading-state p,
.empty-state p {
  font-size: 18px;
  margin: 0;
}

/* 报告表格样式 */
.report-table-container {
  overflow-x: auto;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.report-table th {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 18px 15px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  border-bottom: none;
}

.report-table td {
  padding: 15px;
  border-bottom: 1px solid #e9ecef;
  font-size: 14px;
  color: #495057;
}

.report-row:hover {
  background: rgba(52, 152, 219, 0.05);
}

.report-id {
  font-weight: 600;
  color: #2c3e50;
  font-family: 'Courier New', monospace;
}

.mine-name {
  font-weight: 500;
  color: #2c3e50;
}

.evaluation-date,
.evaluator {
  color: #6c757d;
}

/* 安全等级徽章 */
.level-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  min-width: 80px;
}

.level-a {
  background: #d4edda;
  color: #155724;
}

.level-b {
  background: #d1ecf1;
  color: #0c5460;
}

.level-c {
  background: #fff3cd;
  color: #856404;
}

.level-d {
  background: #f8d7da;
  color: #721c24;
}

.level-default {
  background: #e2e3e5;
  color: #495057;
}

/* 操作按钮 */
.actions {
  white-space: nowrap;
}

.actions .btn {
  margin-right: 8px;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid #e9ecef;
}

.page-info {
  color: #6c757d;
  font-size: 14px;
  font-weight: 500;
}

/* 通用弹窗样式 */
.modal-overlay,
.preview-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(3px);
}

.modal {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

.modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 30px;
  border-bottom: 2px solid #e9ecef;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.modal .modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal .modal-body {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #495057;
  margin-bottom: 8px;
  font-size: 14px;
}

.form-input {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-help {
  display: block;
  color: #6c757d;
  font-size: 12px;
  margin-top: 5px;
}

.modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 20px 30px;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
  border-radius: 0 0 16px 16px;
}

/* 预览弹窗样式 */
.preview-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(3px);
}

.preview-modal {
  background: white;
  border-radius: 16px;
  width: 95%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 30px;
  border-bottom: 2px solid #e9ecef;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.preview-content {
  max-width: 100%;
}

.preview-section {
  margin-bottom: 25px;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e9ecef;
}

.preview-section h4 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.info-item .label {
  font-weight: 600;
  color: #495057;
  min-width: 100px;
}

.info-item .value {
  color: #2c3e50;
  flex: 1;
}

.report-summary {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.report-summary p {
  margin-bottom: 10px;
  font-size: 15px;
  color: #495057;
}

.loading-preview {
  text-align: center;
  padding: 40px;
  color: #6c757d;
}

.loading-preview i {
  font-size: 32px;
  margin-bottom: 15px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 20px 30px;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
  border-radius: 0 0 16px 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-stats {
    flex-direction: column;
    gap: 20px;
  }
  
  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input-group {
    min-width: auto;
  }
  
  .search-actions {
    justify-content: center;
  }
  
  .report-table {
    font-size: 12px;
  }
  
  .report-table th,
  .report-table td {
    padding: 10px 8px;
  }
  
  .actions .btn {
    margin-bottom: 5px;
  }
  
  .preview-modal {
    width: 98%;
    max-height: 95vh;
  }
  
  .modal-body {
    padding: 20px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .pagination {
    flex-direction: column;
    gap: 15px;
  }
  
  .modal-footer {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 24px;
  }
  
  .report-table th,
  .report-table td {
    padding: 8px 6px;
  }
  
  .btn-sm {
    padding: 6px 12px;
    font-size: 11px;
  }
}
</style>
